<template>
	<view class="main">

		<view class="md">
			<view class="mdi" v-for="(i,o) in doctorList" :key="o" @click="openDoctorDate(i)">
				<img :style="{backgroundColor:i.img?'':'#eee'}"
					:src="i.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'"
					alt="" />
				<view class="mdic">
					<view class="mdict">
						<view>
							<view class="mdictn">{{i.name}}</view>
							<view class="mdictz">{{i.zhicheng}}</view>
						</view>
						<view :class="['mdictb',i.paihao == 0 ? 'mdictbA':'']">本月排班：{{i.paihao == 0 ?'暂无':`${i.paihao} 天`}}</view>
					</view>
					<view class="mdice">{{i.shangchang}}</view>
				</view>
			</view>
		</view>

		<uv-calendars ref="calendars" mode="range" title="排班班次" :readonly="true" @confirm="confirm" :selected="selected"
			startText="今日" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: [{
					date: `2025-04-03`,
					info: '班次:10',
					infoColor: '#2c9b94',
				}, {
					date: `2025-04-07`,
					info: '班次:10',
					infoColor: '#2c9b94',
				}, {
					date: `2025-04-09`,
					info: '班次:10',
					infoColor: '#2c9b94',
				}, {
					date: `2025-04-14`,
					info: '班次:10',
					infoColor: '#2c9b94',
				}, {
					date: `2025-04-21`,
					info: '班次:10',
					infoColor: '#2c9b94',
				}, {
					date: `2025-04-24`,
					info: '班次:10',
					infoColor: '#2c9b94',
				}, {
					date: `2025-04-28`,
					info: '班次:10',
					infoColor: '#2c9b94',
				}],
				doctorList: [{
						name: '张大师',
						zhicheng: '主任医师',
						id: 1,
						paihao: 0,
						img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
						shangchang: '擅长:过敏性疾病及免疫相关皮肤病的诊治，对湿疹、荨麻疹、特应性皮炎、银屑病、脂溢性皮炎、白癜风、斑秃、天疱疮、类天疱疮、痤疮、皮肌炎、红斑狼疮、硬皮病、扁平苔藓等有丰富的临床经验，对性传播疾病:梅毒、尖锐湿疣、生殖器疱疹的诊治有丰富的经验。对皮肤科罕见病及遗传性疾病的诊治经验丰富。'
					},
					{
						name: '张大师',
						zhicheng: '主任医师',
						id: 2,
						paihao: 5,
						img: '',
						shangchang: '擅长:过敏性疾病及免疫相关皮肤病的诊治，对湿疹、荨麻疹、特应性皮炎、银屑病、脂溢性皮炎、白癜风、斑秃、天疱疮、类天疱疮、痤疮、皮肌炎、红斑狼疮、硬皮病、扁平苔藓等有丰富的临床经验，对性传播疾病:梅毒、尖锐湿疣、生殖器疱疹的诊治有丰富的经验。对皮肤科罕见病及遗传性疾病的诊治经验丰富。'
					}
				]
			}
		},
		onLoad(o) {
			console.log(o)
			// o.id
			uni.setNavigationBarTitle({
				title: JSON.parse(o.info).name
			})

		},
		methods: {
			confirm() {
				this.$refs.calendars.close();
			},
			openDoctorDate(item) {
				this.$refs.calendars.open();
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		background-color: #f5f5f5;

		.md {
			background-color: #fff;
			border-radius: 22rpx 22rpx 0 0;
			padding: 20rpx 30rpx;

			.mdi {
				display: flex;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				border-bottom: 1px dashed #eee;

				img {
					width: 120rpx;
					height: 140rpx;
					border-radius: 22rpx;
					margin-right: 30rpx;
				}

				.mdic {
					width: calc(100% - 150rpx);

					.mdict {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
						position: relative;
						color: #666;

						.mdictn {
							color: #000;
							font-weight: bold;
							font-size: 33rpx;
							margin-bottom: 10rpx;
						}

						.mdictp {
							position: absolute;
							right: 170rpx;
							color: #f00;
						}

						.mdictb {
							width: 250rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 12rpx;
							color: #fff;
							background-color: #2c9b94;
							position: absolute;
							right: 20rpx;
							font-size: 28rpx;
						}

						.mdictbA {
							background-color: #999;
						}
					}

					.mdice {
						overflow: hidden;
						font-size: 28rpx;
						color: #555;
						line-height: 50rpx;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	/deep/.uv-calendar-item--before-checked {
		background-color: transparent !important;

		text {
			color: #333 !important;
		}

		.uv-calendar-item__weeks-lunar-text {
			color: #0091ff !important;
		}

	}
</style>